<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id='app'>
        {{bookTitle}}
        <!-- 用title作为props名 给你注入为父的bookTitle的值 你爱咋用咋用爹不管你-->
        <!-- 但你挣钱了以后必须以自定义事件update:title的形式 给爹发送一个bookTitle的最新值 你从哪弄来那么一个破值爹不管 -->
        <my-component v-model:title="bookTitle"></my-component>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    bookTitle: "《欢哥对自己的嗜好讳莫如深》"
                }
            }
        })

        app.component('my-component', {

            // 接收title
            props: {
                title: String
            },

            // 向上发送自定义事件 update:title 【系统自会处理这个事件，所以不必在模板上显式地写 @update:title="bookTitle=$event" 】
            emits: ['update:title'],

            template: `
                <input
                type="text"
                :value="title"
                @input="$emit('update:title', $event.target.value)">
            `})

        app.mount('#app')
    </script>
</body>

</html>